<template>
	<view class="LNKPI">
	  <view class="CusTop">
		  <view class="topBtn">
			  <view class="goCrm">
			  	<img src="../../static/Ln/zuo.png" alt="" class="zuo" @click="go()"/>
			  </view>
			  <view class="tab-buttons">
					<button class="tab-button" @click="activeTab = 'member'" :class="{ active: activeTab === 'member' }">成员目标</button>
					<button class="tab-button" @click="activeTab = 'department'" :class="{ active: activeTab === 'department' }">部门目标</button>
					<button class="tab-button" @click="activeTab = 'company'" :class="{ active: activeTab === 'company' }">公司目标</button>
			  </view>
			  <span class="checkAll" @click="selectAllmember" v-show="activeTab === 'member'">全选</span>
			  <span class="checkAll" @click="selectAlldepartment" v-show="activeTab === 'department'">全选</span>
			  <span class="checkAll" @click="saveData" v-show="activeTab === 'company'">保存</span>
		  </view>
		  <view class="topSelect">
		  			  <picker mode="selector" :range="years" :value="selectedYearIndex" @change="onYearChange">
		  				  <view class="picker">
		  					{{years[selectedYearIndex]}}年&nbsp;∨
		  				  </view>
		  				</picker>
		  				<picker mode="selector" :range="departments" :value="selectedDepartmentIndex" @change="onDepartmentChange">
		  				  <view class="picker">
		  					{{departments[selectedDepartmentIndex]}}&nbsp;∨
		  				  </view>
		  				</picker>
		  				<picker mode="selector" :range="members" :value="selectedMemberIndex" @change="onMemberChange">
		  				  <view class="picker">
		  					{{members[selectedMemberIndex]}}&nbsp;∨
		  				  </view>
		  				</picker>
		  		  </view>
		  
	  </view>
	  <view class="LNCon">
		  <view class="member" v-show="activeTab === 'member'">
			<!-- 成员目标内容 -->
			<ul class="ULCon">
			  <li class="LICon" v-for="item in newArr" :key="item.id">
				<view class="LNleft">
							<input class="u-checkone" type="checkbox" name="" id="" :class="item.checked ? 'checkoneActive' : '' "  />
							<view class="center">
								<img class="tou" src="../../static/Ln/t3.png" alt="" />
								<view class="you">
									<p class="name">{{item.memberName}}</p>
									<p class="department">{{item.department}}/{{item.job}}</p>
								</view>
							</view>
				</view>
				<view class="LNRight">
				  {{item.volumeMoney}}
				</view>
			  </li>
			</ul>
		  </view>
			  
		  <view v-show="activeTab === 'department'">
			<!-- 部门目标内容 -->
			<ul class="ULCon">
			  <li class="LICon" v-for="item in arr" :key="item._id">
				<view class="LNleft">
							<input class="u-checkone"  type="checkbox" name="" id="" :class="item.checked ? 'checkoneActive' : '' "  />
							<view class="center">
								<img class="tou" src="../../static/Ln/t2.png" alt="" />
								<view class="you">
									<p class="department">{{item.department}}</p>
								</view>
							</view>
				</view>
				<view class="LNRight">
				  {{item.volumeMoney}}
				</view>
			  </li>
			</ul>
		  </view>
			  
		  <view v-show="activeTab === 'company'">
			<!-- 公司目标内容 -->
			<ul class="ULCon">
				<li class="LICon">
					<view class="LNleft">
											  <view class="center">
												  <view class="you">
													  <p class="department">年度目标</p>
												  </view>
											  </view>
					</view>
					<view class="LNRight">
					  <input class="volumeMoney" type="text" :value="annualTotal"  />
					</view>
				</li>
			  <li class="LICon" v-for="(item,index) in arr" :key="item._id">
				  
				<view class="LNleft">
							<view class="center">
								<view class="you">
									<p class="department">{{index+1}}月</p>
								</view>
							</view>
				</view>
				<view class="LNRight">
				  <input class="volumeMoney" type="text" :value="item.volumeMoney" />
				</view>
			  </li>
			</ul>
		  </view>
		
	  </view>
	</view>
  </template>
  
  <script>
  export default {
	data() {
	  return {
		arr: [],
		newArr: [],
		activeTab: 'member', // 默认选中的tab
		years: [2018, 2019, 2020, 2021],
		selectedYearIndex: 0,
		departments:['全部部门', '总裁办', '人事部', '行政部', '销售部', '市场部', '财务部', '技术部'],
		selectedDepartmentIndex: 0,
		members:['成交金额', '回款金额', '跟进次数', '新增客户', '新增商机'],
		selectedMemberIndex: 0,
		total:0
	  };
	},
	  computed: {
	  annualTotal() {
		for (let i = 0; i < this.arr.length; i++) {
		  this.total += parseFloat(this.arr[i].volumeMoney);
		}
		return this.total;
	  }
	},
	created() {
	  uni.request({
		url: "http://127.0.0.1:3000/kpi/getAll", //接口地址
		method: "POST",
		success: (res) => {
		  this.arr = res.data.data;
		  this.newArr=res.data.data;
		  console.log(this.arr, "kpi");
		},
	  });
	},
	methods: {
		//筛选功能
		onYearChange(e) {
		  this.selectedYearIndex = e.detail.value;
		  this.newArr = this.arr.filter(item => item.year === this.years[this.selectedYearIndex]);
		  console.log('Selected year:', this.years[this.selectedYearIndex]);
		},
		onDepartmentChange(e) {
		  this.selectedDepartmentIndex = e.detail.value;
		  this.newArr = this.arr.filter(item => item.department === this.departments[this.selectedDepartmentIndex]);
		  console.log('Selected department:', this.departments[this.selectedDepartmentIndex]);
		},
		onMemberChange(e) {
		  this.selectedMemberIndex = e.detail.value;
		   this.newArr = this.arr.filter(item => item.member === this.members[this.selectedMemberIndex]);
		  console.log('Selected member:', this.members[this.selectedMemberIndex]);
		},
		selectAllmember() {
			  // 点击全选复选框时，将所有的成员目标列表项的复选框状态都设置为选中或取消选中
			  const allChecked = this.arr.every(item => item.checked);
			  this.arr.forEach(item => {
				item.checked = !allChecked;
			  });
			},
		  selectAlldepartment() {
				// 点击全选复选框时，将所有的部门目标列表项的复选框状态都设置为选中或取消选中
				const allChecked = this.arr.every(item => item.checked);
				this.newArr.forEach(item => {
				  item.checked = !allChecked;
				});
			  },
			  
		  saveData() {
			
		  },
		  go(){
		  			
		  				 uni.reLaunch({
		  				 	url: '/pages/crm/crm'
		  				 });
		  }
	  }
  };
  </script>
  
  <style lang="scss">
  .LNKPI{
	  background-color: #f9f9f9;
	  .CusTop{
		  position: fixed;
		  left: 0;
		  top: 0;
		  // height: 150rpx;
		  width: 100%;
		  background-color: white;
		  padding-top: 150rpx;
		  .topBtn{
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
			  padding: 0 40rpx;
			  box-sizing: border-box;
			  // margin-top: 100rpx;
			  .goCrm{
				  .zuo{
					  height: 50rpx;
					  width: 50rpx;
				  }
			  }
			  .tab-buttons {
				display: flex;
				margin-bottom: 20rpx;
				// flex: 1;
				.tab-button {
				  padding:0rpx 20rpx;
				  height: 65rpx;
				  line-height: 65rpx;
				  color: rgb(0, 121, 254);
				  border-radius: 0%;
				  font-size: 30rpx;
				  border: 2rpx solid rgb(0, 121, 254);
				  // background-color: #eee;
				  cursor: pointer;
				  .active {
					background-color: #ccc;
				  }
				}
				.active{
					color: white;
					background-color: rgb(0, 121, 254);
				}
			  }
			  .checkAll{
				  margin-left: 40rpx;
				  color: rgb(0, 121, 254);
				  font-size: 30rpx;
			  }
		  }
		  .topSelect{
			  display: flex;
			  justify-content: space-around;
		  }
		  .picker {
	padding: 10rpx 30rpx;
	text-align: center;
	font-size: 28rpx;
	color: gray;
  }
		  
	  }
	  .LNCon{
		  margin-top: 300rpx;
		  .ULCon{
			  padding: 40rpx 20rpx;
			  .LICon{
				  width: 100%;
				  padding: 40rpx;
				  box-sizing: border-box;
				  background-color: white;
				  border-radius: 20rpx;
				  box-shadow: 1px 1px 5px #ccc;
				  margin-bottom: 30rpx;
				  display: flex;
				  justify-content: space-between;
				  color: gray;
				  .LNleft{
					  display: flex;
					  align-items: center;
					  .u-checkone{
						  width: 50rpx;
						  height: 50rpx;
						  border: 2rpx solid #ccc;
						  border-radius: 50%;
						  background-color: #eee;
						  
					  }
					  .checkoneActive{
						  background-color: rgb(0, 121, 254);
					  }
					  .center{
						  display: flex;
						  align-items: center;
						  .tou{
							  width: 100rpx;
							  height: 100rpx;
							  margin: 0rpx 20rpx;
						  }
					  }
				  }
				  .LNRight{
					  display: flex;
					  justify-content: center;
					  align-items: center;
					  .volumeMoney{
						  border: 2px solid #ccc;
						  height: 60rpx;
					  }
				  }
			  }
		  }
  
			  }
		  }
	  
  
  </style>
  